<template>
  <div>
    <el-button type="primary" @click="uploadDialog = true">{{$t('stock.批量编辑商品属性')}}</el-button>
    <el-dialog
      :title="$t('stock.批量编辑商品属性')"
      :visible.sync="uploadDialog"
      width="500px"
    >
      <div class="dialog-header">
        <div class="left">
          {{ $t('stock.请先导出商品表格，完善商品属性后再上传') }}
        </div>
        <div class="right">
          <el-button type="primary" :loading="goodsDemoLoading" @click="downloadGoodsDemo">{{ $t('stock.下载商品表格') }}</el-button>
        </div>
      </div>
      <div style="text-align: center">
        <el-upload
          class="upload-demo"
          drag
          :action="uploadUrl"
          :on-success="uploadFileSuccess"
          :show-file-list="false"
          name="file"
          :multiple="false"
          :headers="uploadHeader"
          accept=".csv,.xlsx,.xls"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">{{$t('stock.将Excel表格拖到此处或点击上传')}}</div>
          <div class="el-upload__tip" slot="tip" v-if="false">{{$t('stock.onlyUpload')}}</div>
        </el-upload>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="showDrawer">{{$t('stock.查看列表')}}</el-button>
      </div>
    </el-dialog>

    <el-drawer
      :title="$t('stock.文件上传列表')"
      :visible.sync="drawer"
      direction="rtl"
      size="700px"
    >
      <el-table :data="drawerData">
        <el-table-column
          prop="id"
          label="ID"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="fileName"
          :label="$t('stock.文件')"
          min-width="150"
        >
          <template slot-scope="{row}">
            <a :href="row.excelPath" target="_blank" class="font-blue">{{row.fileName}}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          :label="$t('stock.状态')"
          min-width="150"
        >
          <template slot-scope="{row}">
            <template v-if="row.status === -1">
              <span class="font-red">{{ getStatusStr(row.status) }} <i class="el-icon-error"></i></span>
            </template>
            <template v-if="row.status === 0">
              <span class="font-blue">{{ getStatusStr(row.status) }} <i class="el-icon-loading"></i></span>
            </template>
            <template v-if="row.status === 1">
              <span class="font-blue">{{ getStatusStr(row.status) }} <template v-if="row.totalNum">{{row.currentNum}}/{{row.totalNum}}</template><i class="el-icon-loading"></i></span>
            </template>
            <template v-if="row.status === 2">
              <span class="font-green">{{ getStatusStr(row.status) }} <i class="el-icon-success"></i></span>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="result"
          :label="$t('stock.处理结果')"
          min-width="100"
        >
          <template slot-scope="{row}">
            <template v-if="row.resultPath && row.status === 2">
              <a :href="row.resultPath" target="_blank" class="font-blue">result</a>
            </template>
            <template v-else-if="row.status === -1">
              {{ row.remark }}
            </template>
            <template v-else>
              -
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>

  </div>
</template>

<script>
import {getToken} from "@/utils/auth";
import {deepCopy} from "@/utils";
import {getGoodsAttrDemoExcel} from "@/api/stock";
import {getHandleExcelList} from "@/api/excel";
import {getStatusStr} from "@/utils/excel";

export default {
  name: "BatchGoodsAttr",
  data(){
    return {
      uploadDialog: false,
      uploadUrl: `${process.env.VUE_APP_BASE_API }/excel/uploadGoodsAttrExcel`,
      uploadHeader: {
        Authorization: 'Bearer ' + getToken(),
      },
      goodsDemoLoading: false, // 商品模板下载
      drawer: false,
      drawerData: [],
      loop: null,

    }
  },
  created() {
    // this.getDrawerData()
  },
  methods:{
    getStatusStr,
    showDrawer(){
      this.drawer = true
      this.getDrawerData()
    },
    uploadFileSuccess(res, file) {
      if (res.error === 0) {
        this.$successMessage(res.message)
        this.drawer = true;
        this.getDrawerData()
      } else {
        this.$errorMessage(res.message);
      }
    },
    getDrawerData(){
      getHandleExcelList()
        .then(res=>{
          this.drawerData = deepCopy(res.data)
          this.setLoop();
        })
    },
    setLoop(){
      // 判断是否要不断请求
      const flag = this.drawerData.some(item=> item.status === 0);
      if(flag && this.drawer){
        // 1.5s请求一次接口
        setTimeout(()=>{
            this.getDrawerData()
        },1500);
      }
    },
    // 下载商品模板
    downloadGoodsDemo(){
      this.goodsDemoLoading = true
      this.$successMessage('如果数据量大请耐心等待，数据处理导出中...')
      getGoodsAttrDemoExcel()
        .then(res=>{
          this.goodsDemoLoading = false
          window.open(res.data.excelPath,"_blank");
        })
    }
  }
}
</script>

<style scoped lang="scss">
.dialog-header{
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  .left{
    line-height: 30px;
  }
  .right{
    margin-left: 30px;
  }
}
</style>
